<!--vue模板-->
<template>
  <div>
    <!--询价清单及要求-->
    <div class="tip">询价清单及要求</div>
    <el-form ref="addForm" :model="freightInquiry" label-width="auto" style="
        max-width:1000px;
        margin: auto;
        background-color: #fff;
        padding: 20px;
        border: 1px solid #ccc">
      <el-row>
        <el-col :span="10" style="margin-left: 30px;">
          <el-form-item label="客户ID :">
            <el-input v-model="freightInquiry.customer_id" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="10" style="margin-left: 60px;">
          <el-form-item label="询价编码 :">
            <el-input v-model="freightInquiry.quote_coding" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10" style="margin-left: 30px;">
          <el-form-item label="询价日期 :">
            <el-date-picker v-model="freightInquiry.quote_date" placeholder="下拉选择日期" style="width: 500px;" />
          </el-form-item>
        </el-col>
        <el-col :span="10" style="margin-left: 60px;">
          <el-form-item label="货物种类 :">
            <el-input v-model="freightInquiry.type_goods" placeholder="单行输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10" style="margin-left: 30px;">
          <el-form-item label="运输方式:">
            <el-select v-model="freightInquiry.transport_way" placeholder="海运/铁路/公路/空运/多联式/散货 ">
              <el-option v-for="item in shippingOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10" style="margin-left: 60px;">
          <el-form-item label="航线选择:">
            <el-select v-model="freightInquiry.route" placeholder="请选择">
              <el-option v-for="item in routeSelection" :key="item.label" :label="item.label" :value="item.label" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10" style="margin-left: 30px;">
          <el-form-item label="起运港 :">
            <el-input v-model="freightInquiry.port_of_departure" placeholder="默认 上海" />
          </el-form-item>
        </el-col>
        <el-col :span="10" style="margin-left: 60px;">
          <el-form-item label="目的港 :">
            <el-input v-model="freightInquiry.port_of_destination" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10" style="margin-left: 30px;">
          <el-form-item label="报价条款:">
            <el-select v-model="freightInquiry.quotation_terms" placeholder="CFR/CIF/DDU/DAP/DDP/其他 ">
              <el-option v-for="item in offerTerms" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10" style="margin-left: 60px;">
          <el-form-item label="货物描述 :">
            <el-input v-model="freightInquiry.description_goods" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10" style="margin-left: 30px;">
          <el-form-item label="HS编码 :">
            <el-input v-model="freightInquiry.hs_code" placeholder="默认 84749000" />
          </el-form-item>
        </el-col>
        <el-col :span="10" style="margin-left: 60px;">
          <el-form-item label="柜型选择:">
            <el-select v-model="freightInquiry.cabinet_type"
              placeholder="拼箱/20GP/40GP/20HQ/40HQ/20FR/40FR/200T/400P/散货 ">
              <el-option v-for="item in cabinetType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="tip">产品信息</div>
    <el-table :data="tableData" style="width: 1000px ;margin: auto;" stripe border>
      <el-table-column prop="product_number" label="产品编号" width="140" header-align="center" />
      <el-table-column prop="product_name" label="产品名称" width="140" header-align="center" />
      <el-table-column prop="pieces" label="总件数" width="180" header-align="center">
        <template v-slot="{row}">
          <el-input-number v-model="row.pieces"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="gross_weight" label="总毛重（kg）" width="180" header-align="center">
        <template v-slot="{ row }">
          <el-input-number v-model="row.gross_weight"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="volume" label="总体积（CBM）" width="180" header-align="center">
        <template v-slot="{ row }">
          <el-input-number v-model="row.volume"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="support_number" label="总托数" width="180" header-align="center">
        <template v-slot="{ row }">
          <el-input-number v-model="row.support_number"></el-input-number>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div style="background-color: #fff; height: 50px; line-height: 50px; max-width: 1000px;  margin: auto;">
      <el-pagination background :page-size="pageSize" layout="total,sizes,prev, pager, next, jumper" :total="total"
        @size-change="chgsize" @current-change="chgpg" />
    </div>

    <div style="text-align: center;margin: 20px">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="info" @click="close">取消</el-button>
    </div>
  </div>
</template>

<!--vue组件选项定义-->
<script setup>
import { ref ,onBeforeMount} from "vue";
import { useRouter, useRoute } from "vue-router";
import { getDetail, update ,queryfreightProduct} from "@/api/freightinquiry.js";
import { ElMessage } from "element-plus";
//路由信息
const route = useRoute();
const tableData = ref([]);
//路由实例
const router = useRouter();

//运输选项
const shippingOptions = [
  {
    label: "海运",
    value: 1
  },
  {
    label: "铁路",
    value: 2
  },
  {
    label: "公路",
    value: 3
  },
  {
    label: "空运",
    value: 4
  },
  {
    label: "多联式",
    value: 5
  },
  {
    label: "散货",
    value: 6
  }
];
//报价条款
const offerTerms = [
  {
    label: "CFR",
    value: 1
  },
  {
    label: "CIF",
    value: 2
  },
  {
    label: "DDU",
    value: 3
  },
  {
    label: "DAP",
    value: 4
  },
  {
    label: "DDP",
    value: 5
  },
  {
    label: "其他",
    value: 6
  }
];
//柜型选择
const cabinetType = [
  {
    label: "拼箱",
    value: 1
  },
  {
    label: "20GP",
    value: 2
  },
  {
    label: "40GP",
    value: 3
  },
  {
    label: "20HQ",
    value: 4
  },
  {
    label: "40HQ",
    value: 5
  },
  {
    label: "20FR",
    value: 6
  }
  ,
  {
    label: "40FR",
    value: 7
  }
  ,
  {
    label: "200T",
    value: 8
  },
  {
    label: "400P",
    value: 9
  }
  ,
  {
    label: "散货",
    value: 10
  }
]
//航线选择
const routeSelection = [
  { label: "中国-北美" },
  { label: "中国-美加" },
  { label: "中国-欧洲" },
  { label: "中国-澳大利亚/新西兰" },
  { label: "中国-中南美" },
  { label: "中国-红海/地中海" },
  { label: "中国-东南亚" },
  { label: "中国-中东/斯波湾" },
  { label: "中国-日本/韩国/俄罗斯" },
  { label: "中国-中东/印巴" },
  { label: "中国-黑海/亚德里亚湾" },
  { label: "中国-南美东/南美西" },
  { label: "中国-欧洲内部" },
  { label: "中国-东非" },
  { label: "中国-西非" },
  { label: "中国-北非" },
  { label: "中国-南非" },
  { label: "中国-加勒比海" },
  { label: "中国-科隆" },
  { label: "中国-印巴" },
  { label: "中国-香港/澳门/台湾" },
];
//表单引用 声明同名引用
const addForm=ref();

//表单对象
const freightInquiry = ref({
  cabinet_type: "",
  customer_id: "",
  description_goods: "",
  hs_code: "",
  port_of_departure: "",
  port_of_destination: "",
  quotation_terms: "",
  quote_coding: "",
  route: "",
  quote_date:"",
  transport_way: "",
  type_goods: "",
  status: 1
});

//取消
function close(){
  router.push("/freightInquiry/list");
}

//查询详情
async function queryDetail(quote_coding) {
  let res = await getDetail(quote_coding);
  if (res.code == 200) {
    freightInquiry.value = res.data;
  }
}
//保存
async function save(){
  let valid=addForm.value.validate(()=>{});
  if(!valid) return;
  console.log(freightInquiry.value);
  let res = await update(freightInquiry.value);
  if(res.code == 200){
    ElMessage({
      message:"保存成功",
      type:"success"
    });
    close();
  }
}


//分页信息
const page = ref(1);//当前页 默认第一页
const pageSize = ref(10);//每页记录数
const total = ref(0);//总记录数

//每页记录数的变更
function chgsize(size) {
  //更改每页记录数
  pageSize.value = size;
  //从第一页开始查
  page.value = 1;
  //查询数据
  initData();
};
//页面发生变化
function chgpg(pg) {
  //更改当前页
  page.value = pg;
  //查询数据
  initData();
};

//查询数据
async function initData() {
  //请求
  let data = {
    page: page.value,
    pageSize: pageSize.value
  };
  let res = await queryfreightProduct(data);
  if (res.code == 200) {
    tableData.value = res.data.data;
    //接受分页信息
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
}
//生命周期
onBeforeMount(() => {
  //获取客户id
  let quote_coding = route.query.quote_coding;
  queryDetail(quote_coding);
  initData();
})

</script>

<!--vue样式 scoped 当前样式只适用于当前组件-->
<style scoped>
.tip{
  width: 1000px;
  margin: auto;
  height: 60px;
  line-height: 60px;
  border: #ccc solid 1px;
  padding-left: 40px;
}
</style>
